<template>
    <transition name="container">
        <div v-if="visible" @click.stop="" class="control-box" @contextmenu.stop="">
          <div class="flex-center flex-column">
            <div class="flex-between">
              <el-icon :size="20"><sunny /></el-icon>
              <el-slider v-model="light" tooltip-class='z-popper'/>
            </div>
            <div class="flex-between">
              <el-icon :size="20"><headset/></el-icon>
              <el-slider v-model="sound" tooltip-class='z-popper'/>
            </div>
          </div>
        </div>
    </transition>
    <teleport to="body">
			<div class="mask" :style="{ opacity:(100-light)/120 }">
			</div>
		</teleport>
</template>

<script>
import { reactive,toRefs } from 'vue'
export default {
  name:'ControlMenu',
  props: {
    visible:{
      type:Boolean,
      default:false
    },
  },
  components: {

  },
  emits:[],
  setup(props,context) {
    let control = reactive({
      light:100,
      sound:0
    })

    return {
      ...toRefs(control)
    }
  }
};
</script>

<style scoped lang="scss">
@keyframes translateAnimationShow {
    from 
    {
      opacity: 0;
      transform:  scaleY(0);
    }
    to 
    {
      bottom: 10px;
      opacity: 1;
      transform:  scaleY(1);

    }
}
  
@keyframes translateAnimationHide {
    from 
    {
      opacity: 1;
      transform: scaleY(1);
    }
    to 
    {
      opacity: 0;
      transform:  scaleY(0);
    }
}

.control-box {
  z-index: 9996;
  width: 360px;
  height: 150px;
  background-color: rgba(255,255,255);
  position: absolute;
  bottom: 10px;
  right: 10px;
  border-radius: 10px;
  padding: 10px 10px;
  transform-origin: bottom;
  overflow: hidden;
  box-shadow: 0px 0px 2px 1px #efefef;

  .flex-column {
    height: 100%;
    flex-direction: column;

    .flex-between {
      width: 100%;
      padding: 10px 15px 10px 10px;

      i {
        margin-right: 25px;
      }
    }
  }
}

.container-enter-active {
  animation-name: translateAnimationShow;
  animation-duration: .2s;
  animation-fill-mode: forwards;
}

.container-leave-active {
  animation-name: translateAnimationHide;
  animation-duration: .2s;
  animation-fill-mode: forwards;
}

.mask {
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #101010;
  pointer-events:none;
}
</style>

